---
import '../assets/normalize.css'
import '../assets/style.css'
import '../assets/global.css'
import { SEO } from 'astro-seo'
import { getEnv } from '../lib/env'
import backToTopIcon from '../assets/back-to-top.svg'

const { SITE_URL, RSS_URL, RSS_PREFIX } = Astro.locals
const { channel } = Astro.props

const locale = getEnv(import.meta.env, Astro, 'LOCALE')

const seo = channel?.seo
const reqPathname = Astro.url.pathname.replace(/\/$/, '')
const canonical = SITE_URL.startsWith('http') ? new URL(SITE_URL).origin + reqPathname : Astro.url.origin + reqPathname

const { origin, pathname } = new URL(canonical)
const twitter = getEnv(import.meta.env, Astro, 'TWITTER')

const seoParams = {
  title: seo?.title,
  description: seo?.text ?? channel?.description,
  canonical,
  noindex: seo?.noindex ?? getEnv(import.meta.env, Astro, 'NOINDEX'),
  nofollow: seo?.nofollow ?? getEnv(import.meta.env, Astro, 'NOFOLLOW'),
  openGraph: {
    basic: {
      type: 'website',
      title: channel?.title ?? '',
      url: canonical,
      image: channel?.avatar ? channel.avatar : origin + '/favicon.ico',
    },
    optional: {
      description: seo?.text ?? channel?.description,
      locale,
    },
  },
  extend: {
    link: [
      {
        rel: 'icon',
        href: channel?.avatar
          ? `https://wsrv.nl/?w=64&h=64&fit=cover&mask=circle&url=ssl:${channel?.avatar?.replace(/^https?:\/\//, '')}`
          : '/favicon.svg',
      },
    ],
  },
}

const GOOGLE_SEARCH_SITE = getEnv(import.meta.env, Astro, 'GOOGLE_SEARCH_SITE')
const searchAction = GOOGLE_SEARCH_SITE ? 'https://www.google.com/search' : '/search/result'

const HEADER_INJECT = getEnv(import.meta.env, Astro, 'HEADER_INJECT')
const FOOTER_INJECT = getEnv(import.meta.env, Astro, 'FOOTER_INJECT')
const TAGS = getEnv(import.meta.env, Astro, 'TAGS')
const LINKS = getEnv(import.meta.env, Astro, 'LINKS')
const navs = (getEnv(import.meta.env, Astro, 'NAVS') || '')
  .split(';')
  .filter(Boolean)
  .map((link) => {
    link = link.split(',')
    return {
      title: link[0],
      href: link[1],
    }
  })
---

<!doctype html>
<html lang={locale ?? 'en'}>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#f4f1ec" />
    <link rel="alternate" type="application/rss+xml" title={`${RSS_PREFIX}${channel?.title}`} href={RSS_URL} />
    <style is:inline>
      @view-transition {
        navigation: auto; /* enabled */
      }
    </style>
    <SEO
      titleTemplate={`%s | ${channel?.title}`}
      titleDefault={[channel?.title, seoParams.description].filter(Boolean).join(' - ')}
      twitter={{
        card: 'summary_large_image',
        creator: twitter ? `@${twitter}` : undefined,
      }}
      {...seoParams}
    />
    <Fragment set:html={HEADER_INJECT} />
  </head>

  <body>
    <div id="wrapper">
      <div id="container">
        <div id="main-container">
          <slot />
        </div>
        <div id="aside-container">
          <slot name="aside">
            <div class="nav">
              <div class="nav-item">
                <a href={SITE_URL} title={channel?.title} class={`nav-link ${pathname === '/' ? 'current' : ''}`}>
                  Home
                </a>
              </div>
              {
                TAGS ? (
                  <div class="nav-item">
                    <a
                      href={`${SITE_URL}tags`}
                      title="Tags"
                      class={`nav-link ${pathname === '/tags' ? 'current' : ''}`}
                    >
                      Tags
                    </a>
                  </div>
                ) : null
              }
              {
                LINKS ? (
                  <div class="nav-item">
                    <a
                      href={`${SITE_URL}links`}
                      title="Links"
                      class={`nav-link ${pathname === '/links' ? 'current' : ''}`}
                    >
                      Links
                    </a>
                  </div>
                ) : null
              }
              {
                navs.map((nav) => (
                  <div class="nav-item">
                    <a href={nav.href} title={nav.title} target="_blank" rel="noopener" class="nav-link">
                      {nav.title}
                    </a>
                  </div>
                ))
              }
            </div>
            <input class="search-icon" name="icon" type="checkbox" placeholder="Search" />
            <form class="search-form" action={searchAction} method="get">
              {GOOGLE_SEARCH_SITE ? <input type="hidden" name="as_sitesearch" value={GOOGLE_SEARCH_SITE} /> : null}
              <input type="text" name="q" placeholder="Search" />
            </form>
            <div class="copyright-wrap">
              Powered by
              <a
                href="https://github.com/ccbikai/BroadcastChannel"
                title="BroadcastChannel"
                target="_blank"
                rel="noopener"
              >
                BroadcastChannel
              </a> &
              <a href="https://github.com/Planetable/SiteTemplateSepia" title="Sepia" target="_blank" rel="noopener">
                Sepia
              </a>
            </div>
          </slot>
        </div>
      </div>
    </div>
    <a href="#wrapper" id="back-to-top" aria-label="Back to top">
      <img {...backToTopIcon} alt="Back to Top" />
    </a>
    <Fragment set:html={FOOTER_INJECT} />
  </body>
</html>
